<template>
  <a-modal
    width="45%"
    unmount-on-close
    :mask-closable="false"
    :visible="visible"
    title="关联车辆"
    :footer="false"
    @close="handleClose"
    @cancel="handleCancel"
    @before-open="handleBeforeOpen"
  >
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <a-alert class="items-start mb-4">
      <template #icon>
        <icon-exclamation-circle />
      </template>
      <div> <span class="text-blue-600">已处置、已归还</span>的车辆自动从关联列表中删除 </div>
    </a-alert>
    <table-index :table="table" @loadData="loadData" />
  </a-modal>
</template>

<script setup lang="ts">
  import { getViolationQueryCarCount } from '@/api/asset/carViolation'

  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { computed, reactive } from 'vue'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  })
  const emits = defineEmits(['update:visible', 'close'])

  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })

  const queryParam = reactive<any>({})
  const searchList = [{ label: '车牌号', prop: 'licenseNoLike', type: 'a-input', span: 2 }]

  const table = useTable({
    columns: [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
      },
      {
        title: '最近一次查询时间',
        dataIndex: 'lastQueryTime',
      },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, getViolationQueryCarCount)

  const handleBeforeOpen = () => {
    console.log('props.options', props.options)

    queryParam.accountId = props.options.id
    loadData()
  }

  const handleCancel = () => {
    visible.value = false
  }

  const handleClose = () => {
    queryParam.accountId = undefined
    queryParam.licenseNoLike = undefined
    emits('close')
  }
</script>

<style scoped lang="less"></style>
